<template>
  <div class="card-form-title">
    <el-row>
      <el-col :span="20">
        <div class="card-form-title-text">
          {{ title }}
        </div>
      </el-col>
      <el-col :span="4" class="align-right">
        <slot></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'CardFormTitle',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
}
</script>

<style lang="scss" scoped>
.card-form-title {
  &-text {
    font-size: 19px;
    font-weight: 700;

    padding-top: 4px;
    padding-bottom: 4px;
  }
}

.card-form-content + .card-form-title {
  margin-top: 20px;
}

/deep/ .el-row::before {
  content: ' ';
  width: 4px;
  height: 24px;

  background-color: #64b3ed;

  position: absolute;
  left: -20px;
}
</style>
